<template>
	<view class="container">
		<view class="moneyInfo">
			<view class="moneyNumber">
				<view class="moneyLeft">
					退款金额
				</view>
				<view class="moneyRight" style="color: #E94732;">
					￥{{money}}
				</view>
			</view>
			<view class="moneyNumber">
				<view class="moneyLeft">
					退款账户
				</view>
				<view class="moneyRight">
					原路退回
				</view>
			</view>
			
		</view>
		
		<view class="moneyTime">
			<view class="timesteps">
				<view class="timestepsRadius">
					
				</view>
				<view class="timestepsBor">
					
				</view>
				
				<view class="timestepsRadius active">
					
				</view>
				<view class="timestepsBor">
					
				</view>
			</view>
			<view class="" style="flex: 1;">
				<view class="timeBox">
					<view class="timeLeft">
						商家同意退款
					</view>
					<view class="timeRight">
						{{agreeTime}}
					</view>
				</view>
				<view class="timeBox">
					<view class="timeLeft">
						微信支付受理
					</view>
					<view class="timeRight">
						{{acceptanceTime}}
					</view>
				</view>
				<view class="timeBox timeTip">
					退款有一定延迟，用零钱支付的退款20分钟内到账
				</view>
			</view>
			
		</view>
		
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
import mixin from '@/utils/mixin.js';
export default {
	mixins: [mixin],
	components: {
	},
	data() {
		return {
			money:0,
			acceptanceTime:'',
			agreeTime:''
		};
	},
	onLoad(options) {
		// #ifdef H5
		   this.$wechat.noShare();
		// #endif
		console.log(options);
		
		if (options.item) {
			const item = JSON.parse(options.item)
			this.money = item.rejectAmount;
			this.acceptanceTime = item.rejectSuccessDate;
			this.agreeTime= item.disposeDate;
		}
	},
	methods: {
		
	}
};
</script>

<style lang="scss">
.container{
	color: #666666;;
	font-size: 28rpx;
}

.moneyInfo{
	margin-bottom: 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
	background-color: #fff;
	
	.moneyNumber{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #EFEFEF;
		padding: 20rpx 5rpx;
		
		
		&:last-child{
			border-bottom:none
		}
	}
}
.moneyTime{
	margin-bottom: 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
	background-color: #fff;
	display: flex;
	.timesteps{
		width: 60rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		flex-direction: column;
		
		
		.timestepsRadius{
			width: 25rpx;
			height: 25rpx;
			border-radius: 50%;
			background-color: #D4D4D4;
			&:first-child{
				margin-top: 33rpx;
			}
		}
		.active{
			width: 35rpx;
			height: 35rpx;
			background-color: #12CD0F;
			border: 8rpx solid #B6F0B8;
		}
		.timestepsBor{
			border-left: 2rpx solid #D4D4D4;
			width: 2rpx;
			height: 55rpx;
		}
	}
	
	
}
.timeBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		margin-left: 10rpx;
	}
	.timeTip{
		font-size: 24rpx;
		padding: 13rpx 0;
		color: #A7A7A7;
	}
</style>
